<template>
    <div>
        <el-form :model="addForm" label-width="100px" :rules="addFormRules" ref="addForm">
            <el-form-item label="姓名：" prop="enterName">
                <el-input v-model="addForm.enterName" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别：">
                <el-radio-group v-model="addForm.enterSex">
                    <el-radio label="男">男</el-radio>
                    <el-radio label="女">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="民族：" prop="enterNation">
                <el-input v-model="addForm.enterNation" type="text" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="出生日期：" prop="enterBirth">
                <div class="block">
                    <span class="demonstration"></span>
                    <el-date-picker v-model="addForm.enterBirth" type="date" placeholder="选择日期"
                                    :picker-options="pickerOptions">
                    </el-date-picker>
                </div>
            </el-form-item>
            <el-form-item label="身份证：" prop="enterIdcard">
                <el-input v-model="addForm.enterIdcard" type="text" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="学历：" prop="enterEducation">
                <el-select v-model="addForm.enterEducation" placeholder="请选择学历">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="毕业院校：" prop="enterGraduate">
                <el-input v-model="addForm.enterGraduate" type="text" auto-complete="off"></el-input>
            </el-form-item>
            <!--所选专业：-->
            <el-form-item label="所选专业：" prop="majorId">
                <el-select v-model="addForm.majorId" placeholder="请选择专业">
                    <el-option v-for="item in majors" :key="item.majorId" :label="item.majorName" :value="item.majorId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="手机号：" prop="enterPhone">
                <el-input v-model="addForm.enterPhone" type="text" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="家庭住址：" prop="enterAddress">
                <el-input v-model="addForm.enterAddress" type="text" auto-complete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="float:right;">
            <el-button @click=" remove">取消</el-button>
            <el-button type="primary" @click="addSubmit" :loading="addLoading">保存</el-button>
        </div>
    </div>
</template>
<script>
    import{getMajor,saveRegisterInformation} from '../../api/api'
    export default {
        data(){
            //自定义手机
            var studentPhone = (rule, value, callback) => {
                var reg = /^1[0-9]{10}$/;
                if (!reg.test(value)) {
                    callback(new Error('请输入正确的手机号码'));
                } else {
                    callback();
                }
            };
            //身份证号
            var studentIdcard = (rule, value, callback) => {
                var reg = /^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/
                if (!reg.test(value)) {
                    callback(new Error('请输入合法的身份证'));
                } else {
                    callback();
                }
            };
            //姓名验证
            var studentName = (rule, value, callback) => {
                var reg = /^([\u4e00-\u9fa5]){2,7}$/
                if (!reg.test(value)) {
                    callback(new Error('请输入正确的姓名'));
                } else {
                    callback();
                }
            };
            //姓名验证
            var studentNation = (rule, value, callback) => {
                var reg = /^([\u4e00-\u9fa5]){1,20}$/
                if (!reg.test(value)) {
                    callback(new Error('请输入民族'));
                } else {
                    callback();
                }
            };
            //毕业院校
            var studentGraduate = (rule, value, callback) => {
                var reg = /^([\u4e00-\u9fa5]){4,20}$/
                if (!reg.test(value)) {
                    callback(new Error('请输入毕业院校的全称'));
                } else {
                    callback();
                }
            }

            return {
                value: '',
                majors: [],
                addLoading:false,
                options: [
                    {value: '4', label: '高中'},
                    {value: '3', label: '大专'}

                ],
                pickerOptions: {
                    disabledDate(time) {
                        return false;
                    }
                },
                addForm: {
                    enterName: '',         //学生姓名
                    enterSex: '男',          //学生性别
                    enterNation: '',       //民族
                    enterBirth: '',         //出生日期
                    enterIdcard: '',       //身份证
                    enterEducation: '',        //学历
                    enterGraduate: '',     //毕业院校
                    majorId: '',           //专业
                    enterPhone: '',        //电话
                    enterAddress: '',          //家庭住址
                },
                addFormRules: {
                    enterName: [
                        {required: true, validator: studentName, trigger: 'blur'}
                    ],
                    enterSex: [
                        {required: true, message: '请选择性别', trigger: 'blur'}
                    ],
                    enterNation: [
                        {required: true, validator: studentNation, trigger: 'blur'}
                    ],
                    enterIdcard: [
                        {required: true, validator: studentIdcard, trigger: 'blur'}
                    ],
                    enterEducation: [
                        {required: true, message: '请填写学历', trigger: 'blur'}
                    ],
                    enterGraduate: [
                        {required: true, validator: studentGraduate, trigger: 'blur'}
                    ],

                    enterPhone: [
                        {required: true, validator: studentPhone, trigger: 'blur'}
                    ],
                    enterAddress: [
                        {required: true, min: 6, message: '请输入家庭住址与户口本保持一致', trigger: 'blur'}
                    ]
                },


            }


        },
        methods: {

            getUsers(){
                let para = {};
                getMajor(para).then((res) => {
                    this.majors = res.resData;
                });
            },
            addSubmit:function () {
                this.$refs.addForm.validate((valid)=>{
                    if(valid){
                        this.$confirm('确认提交吗？', '提示', {}).then(()=>{
                           this.addLoading=true;
                           let para=Object.assign({},this.addForm);
                            saveRegisterInformation(para).then((res)=>{
                                this.addLoading=false;
                                if(res.resCode!=0){
                                    this.$message({
                                        message: res.resMsg,
                                        type: 'error'
                                    });
                                }else{
                                    this.$message({
                                        message:'提交成功',
                                        type:'success'
                                    });
                                    this.$refs['addForm'].resetFields();
                                    this.getUsers();

                                }
                            })

                        });
                    }

                });

            },
            remove:function () {
                this.$refs['addForm'].resetFields();
            }

        },

        mounted() {
            this.getUsers();
        }
    }

</script>